<template>
	<div class="modal-inner">
		<el-dialog v-model="showModal" class="peak-dialog" :close-on-click-modal="false" title="选择用户" :width="1200">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="75px" :model="searchForm">
				<el-row>
					<el-col :span="6">
						<el-form-item class="form-item" prop="userName">
							<el-input v-model="searchForm.userName" placeholder="请输入用户账号" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" prop="phonenumber">
							<el-input v-model="searchForm.phonenumber" placeholder="请输入手机号码" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" prop="deptName">
							<el-input v-model="searchForm.deptName" placeholder="请输入单位名称" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<static-table :tableData="tableData" rowId="userId" @radio-change="handleRadioChange" @on-selection-change="handleSelectionChange">
				<template #vux-column>
					<vxe-column v-if="checkType == 'multiple'" type="checkbox" width="50" fixed="left" />
					<vxe-column v-if="checkType == 'simple'" type="radio" width="50" fixed="left" />
					<vxe-column field="userName" min-width="120" show-overflow="tooltip" title="用户账号" />
					<vxe-column field="nickName" min-width="120" show-overflow="tooltip" title="用户昵称" />
					<vxe-column field="phonenumber" min-width="150" show-overflow="tooltip" title="手机号码" />
					<vxe-column field="email" min-width="120" show-overflow="tooltip" title="用户邮箱" />
					<vxe-column field="deptName" min-width="120" show-overflow="tooltip" title="单位名称">
						<template #default="{ row }">
							{{ row.dept.deptName }}
						</template>
					</vxe-column>
				</template>
			</static-table>
			<el-pagination layout="prev, pager, next" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
			<template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="handleCancel">取 消</el-button>
					<el-button size="default" type="primary" @click="handleSure"    v-throttle>确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import global from '@/utils/global'
const emit = defineEmits(['peak-modal-ok', 'handle-ok'])

const checkType = ref('multiple')
const state = reactive({
	showModal: false,
	tableData: [],
	searchForm: {
		pageNum: 1,
		pageSize: 10,
		userName: '',
		phonenumber: '',
		deptName: '',
	},
	dataCount: 0,
	emptyStatus: false,
	searchFormRef: null,
	userChecked: [],
	userObj: {},
})

const { showModal, searchForm, tableData, dataCount, searchFormRef } = toRefs(state)

const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = async val => {
	state.showModal = true
	await nextTick()
	checkType.value = val
	state.userChecked = []
	handleSearch()
}
const handleSearch = () => {
	getTableList()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	getTableList()
}
const handleCurrentChange = val => {
	state.searchForm.pageNum = val
	getTableList()
}
const handleSizeChange = val => {
	state.searchForm.pageSize = val
	getTableList()
}

const handleSelectionChange = val => {
	state.userChecked = val
}
const handleRadioChange = val => {
	state.userObj = val
}
const handleSure = () => {
	if (checkType.value == 'multiple') {
		emit('peak-modal-ok', state.userChecked)
	} else {
		emit('handle-ok', state.userObj)
	}

	state.showModal = false
}

const getTableList = () => {
	global
		.$fetchPostData(`/meta-system/web/v1/sysUser/list`, {
			...state.searchForm,
		})
		.then(data => {
			const res = data
			if (res.code == 200) {
				state.loading = false
				if (res.data.total > 0) {
					state.dataCount = Number(res.data.total)
					state.tableData = res.data.rows
				} else {
					state.dataCount = 0
					state.tableData = []
				}
			} else {
				global.$baseMessage(res.mes, 'error')
			}
		})
}

defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped>
.modal-inner {
	:deep() {
		.el-dialog__body {
			padding: 16px !important;
		}
	}
}
.peak-dialog {
	.el-dialog__header {
		padding: 14px 16px;
		border-bottom: 1px solid #e8eaec;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1;
		margin-right: 0px;
	}
	.el-dialog__footer {
		padding: 16px 18px;
		border-top: 1px solid #e8eaec;
	}
	.el-dialog__headerbtn {
		top: 4px !important;
	}
	.el-input-number {
		width: 100%;
		.el-input__inner {
			text-align: left;
		}
	}
	.el-form--inline {
		.el-form-item {
			margin-right: 0px;
		}
	}
	.el-input-number.is-controls-right .el-input__wrapper {
		padding-left: 10px;
	}
	.el-select {
		width: 100%;
	}
}
</style>
